<%@page pageEncoding="UTF-8" isELIgnored="false" session="false"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@taglib prefix="f" uri="http://www.slim3.org/functions"%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Fb</title>
<script type="text/javascript"
        src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript"
		src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script type="text/javascript">
    (function($) {
        $(document).ready(function() {
            $.getJSON("/fb/newsfeed", function(json) {
            $('#message-list-container').empty();
            
            if(json.error){
            	$('#go-to-facebook-link-container').show();
            }else{
            	//jQuery templateを使うにはJSONの整形が必要
            	/*
            	$('#message-list-container').empty().append(
            		$("#message-list-template").tmpl(json.data)
            	);
            	*/
            	$.each(json.data, function() {
            	 	if(this.type=="status" && this.message){
	            		$('<li>' + this.message + '</li>').appendTo('#message-list-container');
	            	}else if(this.type=="link"){
	            		$('<li>' + this.link + '</li>').appendTo('#message-list-container');
	            	}else if(this.type=="photo"){
	            		$('<li><img src="' + this.picture + '"/></li>').appendTo('#message-list-container');
	            	}
	            	
                });
              }
            });
        });
    })(jQuery);
   </script>
   
<script id="message-list-template" type="text/x-jquery-tmpl">
		<li id="${id}">${type}:${message}</li>
</script>
</head>
<body>
<h1>Hello Fb!</h1>
<p id="go-to-facebook-link-container" style="display:none;"><a href="oauth">go to facebook</a></p>
<ul id="message-list-container">Loading...</ul> 
</body>
</html>
